[イベントレポート] 【朝活】iOS_UIトレース会 #6に参加してきました！

こんぬづは、東京にきてから朝7時前に起床するのはおもえば初めてだったなと振り返った田中です。

今朝はこのイベントに参加させていただきました。そのイベントレポートです。

この会の目的

iOSアプリ開発においてUIによるユーザー体験の充実はますます重要になっています。 アプリ開発者としてわかりやすい、使いやすいアプリを作っていきたいものです。 しかし、すでに世の中にはすばらしいUIをもったアプリが各企業からリリースされています。 この会では、よいアプリのUIをトレースすることで、各開発者のUI実装の向上を図ることを目的に開催します。

conpassより引用

この会の内容

有名なアプリのUIをお題にします。(例：LINEのトーク画面のキーボードの動き) 時間を区切って各自そのUIを実際にコードを打って作ります。 最後にみんなで発表しあって、だれが一番近いUIを作れたか、どう作ったのかを発表します。 コード実装にはライブラリー使用もOKとします。

conpassより引用

開催時間

AM7:30〜9:00

（圧倒的朝）

第6回のお題

第6回はTee-App株式会社が運営している女子の続くiPhoneトレーニングGohobeeのご褒美画面のUIをトレース。

このGohobeeというアプリ、随所にスクロールに合わせたパララックスが入っていたり、すりガラスの表現が入っていたり、こまかなオブジェクトに綺麗なアニメーションが適切に使用されていたりとても洗練されています。
さすが女子のための腹筋アプリという感じです。

お題の箇所の画面はこちらの画面。

成果

ここまで作ることができました。

実装してみたレイアウトとソースコード

今回はパララックスの箇所に絞って実装してみました。
ScrollingFollowViewというライブラリを使うと簡単に実装できそうだと思ったので使ってみました。

Layoutの階層構造はこんな感じ。
コンテンツの入るViewのAutoLayoutは温かみのある手作業で細かく数値を入力しました。
実際にはこの部分はソースコードで動的にViewを生成したほうがよかったかもしれません。

import UIKit
import ScrollingFollowView

class ViewController: UIViewController, UIScrollViewDelegate {
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var contentSFV: ScrollingFollowView!
    @IBOutlet weak var contentSFVTopConstraint: NSLayoutConstraint!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupSFV()
    }

    private func setupSFV() {
        contentSFV.setup(constraint: contentSFVTopConstraint, maxFollowPoint: 200, minFollowPoint: -40)
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        contentSFV.didScroll(scrollView)
    }
}

UIScrollViewの中に静的にUIViewをAutoLayoutで並べていって、コンテンツのViewの中にはUIImageViewの入ったScrollingFollowViewを置いてパララックスっぽいものを表現してみました。文字はコンテンツのViewの中に、ScrollingFollowViewと同じ階層でUILabelを二つ置いて表現しています。

Gohobeeではパララックスのみでなく、このほかにスクロールのバウンスも取っています。そして中のコンテンツの位置はスクロールした分をにそのまま付随させるのではなく、若干遅くついてくるように実装されていました。

まとめ

会の最初は自己紹介や近況報告をして和やかに始まりました。
そこを加味して実装時間は約1時間。全てを実装しきることはできない分、作るところを絞って集中して実装することができました。
始業前の1時間、ただひたすらにUI実装を考える。これを続けたらかなりの力がつきそうだと感じました。

朝活、良かったです！＾＾）

参考・関連